import React, { useEffect, useRef, useState } from 'react';
import { Input, Cell, Sticky, Radio } from 'react-vant';
import { Popup } from 'antd-mobile'
import AMapLoader from '@amap/amap-jsapi-loader';
import { Outlet } from 'react-router-dom'
import { useSelector, useDispatch } from 'react-redux'
import { changeDefaultState } from "./redux/slice/DefaultSlice"
import { useNavigate } from 'react-router-dom';
import { UserCircleOutline, QuestionCircleOutline, SetOutline, EnvironmentOutline, CouponOutline, CheckShieldOutline } from 'antd-mobile-icons'
import './App.scss'
import 'animate.css';
import Hcy_page2 from './components/hcy/component/Hcy_page2';
// import Hcy_page3 from './components/hcy/component/Hcy_page3';
import Hcy_page4 from './components/hcy/component/Hcy_page4';
import Hcy_page8 from './components/hcy/component/Hcy_page8';
import Hcy_page9 from './components/hcy/component/Hcy_page9';
import Jly_qryc from "./components/jly/component/Jly_qryc"
import Jly_sjydd from "./components/jly/component/Jly_sjydd"
import Jly_zfts from "./components/jly/component/Jly_zfts"
import Jly_sjydd1 from "./components/jly/component/Jly_sjydd1"
import Jly_xcyjs from "./components/jly/component/Jly_xcyjs"
import Jly_xcyks from "./components/jly/component/Jly_xcyks"

export default function Lx() {
    let dispatch = useDispatch()
    // 状态库存储的状态
    let { defaultState, yesandno } = useSelector(state => state.DefaultSlice)
    const aaa = useRef()
    const [value1, setValue1] = useState('');//当前位置
    const [value2, setValue2] = useState('');//终点位置
    const [origin, setOrigin] = useState(null);//起点经纬度
    const [destination, setDestination] = useState(null);//终点经纬度
    useEffect(() => {
        window._AMapSecurityConfig = {
            securityJsCode: '58adb04fad18acde7bad954fdf407c5a',//秘钥密码
        }
        AMapLoader.load({
            "key": "f57469336f4ee1ad6596e360ead7ffc7",//key值
            "version": "2.0",
            "plugins": [//插件工具
                "AMap.ToolBar",
                "AMap.Scale",
                "AMap.HawkEye",
                "AMap.MapType",
                "AMap.Geolocation",
                "AMap.ControlBar",
                "AMap.PlaceSearch",
                'AMap.AutoComplete',
                'AMap.Driving',
                'AMap.LngLat',
                'AMap.Geocoder'
            ]
        }).then((AMap) => {
            navigator.geolocation.getCurrentPosition(//获取当前经纬度
                (position) => {
                    const { latitude, longitude } = position.coords;
                    let amap = new AMap.Map('mapContainer', {
                        zoom: 12,
                        center: [longitude, latitude], // 使用当前位置
                        // mapStyle: 'amap://styles/dark',
                    });
                    setOrigin([longitude, latitude]);
                    // 标记当前位置
                    let marker = new AMap.Marker({ position: [longitude, latitude] });
                    const geocoder = new AMap.Geocoder()
                    geocoder.getAddress(new AMap.LngLat(longitude, latitude), function (status, result) {
                        if (status === 'complete' && result.regeocode) {//获取当前经纬度的地址名称
                            setValue1(result.regeocode.formattedAddress)
                        } else {
                            console.error('获取地址失败');
                        }
                    })
                    //搜索提示
                    amap.on('complete', () => {
                        aaa.current.nativeElement.id = 'Input'//为组件设置id名称
                        var autoOptions = {
                            input: "Input"
                        };
                        var auto = new AMap.Autocomplete(autoOptions);
                        var placeSearch = new AMap.PlaceSearch({
                            map: amap
                        })
                        auto.on("select", function (e) {
                            const geocoder = new AMap.Geocoder()
                            geocoder.getLocation(e.poi.name, function (status, result) {//获取终点的经纬度
                                // setValue2(e.poi.name)
                                if (status === 'complete' && result.info === 'OK') {
                                    let lnglat = result.geocodes[0].location
                                    let { lng, lat } = lnglat
                                    setDestination([lng, lat])
                                    console.log('获取经纬度成功')
                                    dispatch(changeDefaultState(1))
                                    var driving = new AMap.Driving({
                                        map: amap,
                                        // panel: "panel"
                                    })
                                    driving.search(new AMap.LngLat(longitude, latitude), new AMap.LngLat(lng, lat), function (status, result) {
                                        if (status === 'complete' && result.info === 'OK') {//获取最路线
                                            console.log(result.routes)
                                            console.log('路线规划成功')
                                        }
                                    })
                                } else {
                                    console.log('获取经纬度失败')
                                }

                            })
                            placeSearch.search(e.poi.name)
                            placeSearch.on('selectChanged', function (e) {
                                amap.setCenter(e.selectedLocation)//将路线设置到地图中
                            })
                        })
                    })
                    // 添加控件
                    amap.add(marker);
                    amap.addControl(new AMap.ToolBar());
                    amap.addControl(new AMap.HawkEye({ isOpen: false }));
                    amap.addControl(new AMap.MapType());
                    amap.addControl(new AMap.Geolocation());
                    amap.addControl(new AMap.ControlBar());
                },
                (error) => {
                    console.error("Error getting location:", error.message); // 处理错误
                }
            );
        }).catch(e => {
            console.log(e);
        });
    }, []);
    let [visible3, setVisibl3] = useState(false)
    let navigate = useNavigate()
    return (
        <div id='map'>
            <div className='tx' onClick={() => { localStorage.getItem('token') ? setVisibl3(true) : navigate('/login') }}>
                <UserCircleOutline
                    style={{ color: 'white', fontSize: '0.4667rem' }}
                />
            </div>
            <Popup
                visible={visible3}
                onMaskClick={() => {
                    setVisibl3(false)
                }}
                position='left'
                bodyStyle={{ width: '60vw' }}
            >
                <div className='txlist'>
                    <li><UserCircleOutline style={{ backgroundColor: '#1778fb', color: 'white', borderRadius: '50%', marginRight: '0.1333rem' }} /><span className='txtxt'>{localStorage.getItem('tel')}</span></li>
                    <li><img src='https://gd-hbimg.huaban.com/083b90fe41e81bb9965ce0de4548f2ee14f656291a692-JkiOFQ_fw658' /></li>
                    <li onClick={() => { navigate('/wdxc') }}><EnvironmentOutline style={{ fontSize: '0.4rem', marginRight: '0.1666rem' }} /><span className='txtxt'>我的行程</span></li>
                    <li><CouponOutline style={{ fontSize: '0.4rem', marginRight: '0.1666rem' }} /><span className='txtxt'>优惠券</span></li>
                    <li onClick={() => { navigate('/contmain') }}> <CheckShieldOutline style={{ fontSize: '0.4rem', marginRight: '0.1666rem' }} /><span className='txtxt'>账号与安全</span></li>
                    <li onClick={() => { navigate('/hwj_service') }}><QuestionCircleOutline style={{ fontSize: '0.4rem', marginRight: '0.1666rem' }} /><span className='txtxt'>联系客服</span></li>
                    <li onClick={() => { navigate('/Hwj_settings') }}><SetOutline style={{ fontSize: '0.4rem', marginRight: '0.1666rem' }} /><span className='txtxt'>设置</span></li>
                </div>
            </Popup>
            <div id="mapContainer"></div>
            <div className={defaultState === 0 ? "banxin" : "banxin yinchang"}>
                <Cell>
                    <Input prefix={
                        <svg t="1727166601099" className="icon" viewBox="0 0 1265 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15055" width="20" height="20"><path d="M 295.268 506.734 c 0 0.00406349 0 0.0182857 0 0.0233651 c 0 186.58 151.254 337.838 337.838 337.838 c 186.58 0 337.838 -151.254 337.838 -337.838 c 0 -0.00507937 0 -0.0193015 0 -0.0233651 c 0 -0.00304762 0 -0.01727 0 -0.0223492 c 0 -186.58 -151.254 -337.838 -337.838 -337.838 c -186.58 0 -337.838 151.254 -337.838 337.838 c 0 0.00507937 0 0.0193015 0 0.023365 Z" fill="#1296db" p-id="15056"></path><path d="M 296.321 503.728 c 0 185.604 150.46 336.066 336.066 336.066 s 336.066 -150.46 336.066 -336.066 c 0 0 0 0 0 0 c 0 -185.604 -150.46 -336.066 -336.066 -336.066 c -185.604 0 -336.066 150.46 -336.066 336.066 c 0 0 0 0 0 0 Z" fill="#1296db" p-id="15057"></path></svg>
                    } value={value1} onChange={setValue1} readOnly />
                </Cell>
                <Cell>
                    <Input ref={aaa} prefix={
                        <svg t="1727166601099" className="icon" viewBox="0 0 1265 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15055" width="20" height="20"><path d="M 295.268 506.734 c 0 0.00406349 0 0.0182857 0 0.0233651 c 0 186.58 151.254 337.838 337.838 337.838 c 186.58 0 337.838 -151.254 337.838 -337.838 c 0 -0.00507937 0 -0.0193015 0 -0.0233651 c 0 -0.00304762 0 -0.01727 0 -0.0223492 c 0 -186.58 -151.254 -337.838 -337.838 -337.838 c -186.58 0 -337.838 151.254 -337.838 337.838 c 0 0.00507937 0 0.0193015 0 0.023365 Z" fill="#1afa29" p-id="15056"></path><path d="M 296.321 503.728 c 0 185.604 150.46 336.066 336.066 336.066 s 336.066 -150.46 336.066 -336.066 c 0 0 0 0 0 0 c 0 -185.604 -150.46 -336.066 -336.066 -336.066 c -185.604 0 -336.066 150.46 -336.066 336.066 c 0 0 0 0 0 0 Z" fill="#1afa29" p-id="15057"></path></svg>
                    } value={value2} onChange={setValue2} />
                </Cell>
            </div>
            {defaultState === 0 && <div className='newbanxin'>
                <Cell>
                    <div className='dibu'>
                        <div className='dibu_left' onClick={() => { setValue2('邯郸市') }}>
                            <svg t="1727182864085" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6684" width="20" height="20"><path d="M640 896h192V469.376h42.666667V896.213333c0 23.466667-19.029333 42.474667-42.666667 42.474667H597.333333V725.333333h-170.666666v213.333334H192c-23.573333 0-42.666667-18.986667-42.666667-42.453334V469.354667h42.666667V896h192V682.666667h256v213.333333z" fill="#bfbfbf" p-id="6685"></path><path d="M100.032 506.133333a21.333333 21.333333 0 1 1-29.397333-30.933333L466.282667 99.349333a66.688 66.688 0 0 1 91.434666 0L953.386667 475.2a21.333333 21.333333 0 1 1-29.397334 30.933333L528.341333 130.282667a24.021333 24.021333 0 0 0-32.682666 0L100.053333 506.133333zM832 192h-128a21.333333 21.333333 0 0 1 0-42.666667h149.333333a21.333333 21.333333 0 0 1 21.333334 21.333334v149.333333a21.333333 21.333333 0 0 1-42.666667 0V192z" fill="#bfbfbf" p-id="6686"></path></svg>
                            <div>
                                <p>家</p>
                                <p>邯郸市</p>
                            </div>
                        </div>
                        <div className='dibu_right' onClick={() => { setValue2('保定理工学院') }}>
                            <svg t="1727182895989" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8080" width="20" height="20"><path d="M832 1015.296H192v-832c0-52.928 43.072-96 96-96h448c52.928 0 96 43.072 96 96v832z m-576-64h512v-768a32 32 0 0 0-32-32h-448a32 32 0 0 0-32 32v768z" p-id="8081" fill="#cdcdcd"></path><path d="M896 1024H128a32 32 0 0 1 0-64h768a32 32 0 0 1 0 64zM480 832h-128a32 32 0 0 1 0-64h128a32 32 0 0 1 0 64zM480 592.832h-128a32 32 0 0 1 0-64h128a32 32 0 0 1 0 64zM480 384h-128a32 32 0 0 1 0-64h128a32 32 0 0 1 0 64zM672 832h-64a32 32 0 0 1 0-64h64a32 32 0 0 1 0 64zM672 592.832h-64a32 32 0 0 1 0-64h64a32 32 0 0 1 0 64zM672 384h-64a32 32 0 0 1 0-64h64a32 32 0 0 1 0 64zM512 112.96a32 32 0 0 1-32-32V32a32 32 0 0 1 64 0v48.96a32 32 0 0 1-32 32z" p-id="8082" fill="#cdcdcd"></path></svg>
                            <div>
                                <p>公司</p>
                                <p>设置公司地址</p>
                            </div>
                        </div>
                    </div>
                </Cell>
            </div>}
            <div className='bottom'>
                {(defaultState === 0 && yesandno === false) && <Jly_zfts></Jly_zfts>}
                {defaultState === 1 && < Jly_qryc ></Jly_qryc>}
                {defaultState === 2 && <Hcy_page2></Hcy_page2>}
                {defaultState === 3 && <Jly_sjydd1></Jly_sjydd1>}
                {defaultState === 4 && <Hcy_page4></Hcy_page4>}
                {defaultState === 5 && <Jly_sjydd></Jly_sjydd>}
                {defaultState === 6 && <Hcy_page9></Hcy_page9>}
                {defaultState === 7 && <Jly_xcyks></Jly_xcyks>}
                {defaultState === 8 && <Jly_xcyjs></Jly_xcyjs>}
                {defaultState === 9 && <Hcy_page8></Hcy_page8>}
            </div>
        </div >
    );
}
